import React from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { 
  Button, 
  Form, 
  Input, 
  Card, 
  Switch, 
  Radio, 
  Row, 
  Col, 
  Space, 
  Upload,
  message 
} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';
import './Settings.scss';

interface SettingsForm {
  siteName: string;
  siteDesc: string;
  logo: string;
  theme: 'light' | 'dark';
  enableNotification: boolean;
  emailNotification: boolean;
  language: 'zh' | 'en';
  pageSize: number;
}

const Settings: React.FC = () => {
  const [form] = Form.useForm<SettingsForm>();

  const uploadProps: UploadProps = {
    name: 'file',
    action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

  const onFinish = async (values: SettingsForm) => {
    try {
      console.log('提交的值:', values);
      message.success('设置保存成功');
    } catch (error) {
      message.error('保存失败');
    }
  };

  const handleReset = () => {
    form.resetFields();
    message.info('已重置所有设置');
  };

  return (
    <div className="settings-page">
      <PageContainer
        header={{
          title: '系统设置',
          ghost: true,
          breadcrumb: {
            items: [
              { title: '首页' },
              { title: '系统管理' },
              { title: '系统设置' },
            ],
          }
        }}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={onFinish}
          initialValues={{
            siteName: '通用后台管理系统',
            theme: 'light',
            language: 'zh',
            pageSize: 10,
            enableNotification: true,
            emailNotification: true,
          }}
        >
          <Row gutter={[16, 16]}>
            {/* 基础设置 */}
            <Col xs={24} lg={12}>
              <Card title="基础设置" className="settings-card">
                <Form.Item
                  label="系统名称"
                  name="siteName"
                  rules={[{ required: true, message: '请输入系统名称' }]}
                >
                  <Input placeholder="请输入系统名称" />
                </Form.Item>

                <Form.Item
                  label="系统描述"
                  name="siteDesc"
                >
                  <Input.TextArea rows={4} placeholder="请输入系统描述" />
                </Form.Item>

                <Form.Item
                  label="系统Logo"
                  name="logo"
                >
                  <Upload {...uploadProps}>
                    <Button icon={<UploadOutlined />}>点击上传</Button>
                  </Upload>
                </Form.Item>
              </Card>
            </Col>

            {/* 界面设置 */}
            <Col xs={24} lg={12}>
              <Card title="界面设置" className="settings-card">
                <Form.Item
                  label="主题设置"
                  name="theme"
                >
                  <Radio.Group>
                    <Radio value="light">浅色</Radio>
                    <Radio value="dark">深色</Radio>
                  </Radio.Group>
                </Form.Item>

                <Form.Item
                  label="系统语言"
                  name="language"
                >
                  <Radio.Group>
                    <Radio value="zh">中文</Radio>
                    <Radio value="en">English</Radio>
                  </Radio.Group>
                </Form.Item>

                <Form.Item
                  label="表格分页"
                  name="pageSize"
                >
                  <Radio.Group>
                    <Radio value={10}>10条/页</Radio>
                    <Radio value={20}>20条/页</Radio>
                    <Radio value={50}>50条/页</Radio>
                  </Radio.Group>
                </Form.Item>
              </Card>
            </Col>

            {/* 消息通知 */}
            <Col xs={24} lg={12}>
              <Card title="消息通知" className="settings-card">
                <Form.Item
                  label="开启通知"
                  name="enableNotification"
                  valuePropName="checked"
                >
                  <Switch />
                </Form.Item>

                <Form.Item
                  label="邮件通知"
                  name="emailNotification"
                  valuePropName="checked"
                >
                  <Switch />
                </Form.Item>
              </Card>
            </Col>

            {/* 安全设置 */}
            <Col xs={24} lg={12}>
              <Card title="安全设置" className="settings-card">
                <Form.Item
                  label="登录密码"
                >
                  <Button type="primary">修改密码</Button>
                </Form.Item>

                <Form.Item
                  label="两步验证"
                >
                  <Button>开启两步验证</Button>
                </Form.Item>
              </Card>
            </Col>
          </Row>

          {/* 底部操作栏 */}
          <div className="settings-footer">
            <Space>
              <Button onClick={handleReset}>重置</Button>
              <Button type="primary" htmlType="submit">
                保存设置
              </Button>
            </Space>
          </div>
        </Form>
      </PageContainer>
    </div>
  );
};

export default Settings;